<template>
    <div class="app-container">
        <SearchContent
            :queryParams="queryParams"
            @query="handleQuery"
            @reset="resetQuery"
        >
            <el-col :span="6">
                <el-form-item label="来源:" prop="purchaseSource">
                    <el-select
                        filterable
                        v-model="queryParams.purchaseSource"
                        clearable
                    >
                        <el-option
                            :label="'自主采购'"
                            :value="1"
                            :key="1"
                        ></el-option>
                        <el-option
                            :label="'订单采购'"
                            :value="2"
                            :key="2"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="采购编号:" prop="purchaseNo">
                    <el-input
                        maxlength="30"
                        v-model="queryParams.purchaseNo"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="客户名称:" prop="customerName">
                    <el-input
                        maxlength="30"
                        v-model="queryParams.customerName"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="业务来源:" prop="businessScopeCode">
                    <el-select
                        filterable
                        v-model="queryParams.businessScopeCode"
                        clearable
                    >
                        <template
                            v-for="dict in dict.type.quota_source_business"
                        >
                            <el-option
                                :label="dict.label"
                                :value="dict.value"
                                :key="dict.value"
                            ></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="状态:" prop="handleStatus">
                    <el-select
                        filterable
                        v-model="queryParams.handleStatus"
                        clearable
                    >
                        <template v-for="dict in dict.type.handle_status">
                            <el-option
                                :label="dict.label"
                                :value="dict.value"
                                :key="dict.value"
                            ></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="订单编号:" prop="orderNo">
                    <el-input
                        maxlength="30"
                        v-model="queryParams.orderNo"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="车辆产权:" prop="propertyRightId">
                    <el-select
                        placeholder="请选择车辆产权"
                        filterable
                        v-model="queryParams.propertyRightId"
                        clearable
                        style="width: 100%"
                    >
                        <template v-for="(item, index) in companyOriginList">
                            <el-option
                                :label="item.deptName"
                                :value="item.deptId"
                                :key="index"
                            ></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="供应商:" prop="propertyRightId">
                    <el-select
                        placeholder="请选择供应商"
                        filterable
                        v-model="queryParams.supplierId"
                        clearable
                        style="width: 100%"
                    >
                        <template v-for="(item, index) in supplierList">
                            <el-option
                                :label="item.supplierName"
                                :value="item.supplierId"
                                :key="index"
                            ></el-option>
                        </template>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="品牌:" prop="brandName">
                    <el-input
                        maxlength="30"
                        v-model="queryParams.brandName"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="车系:" prop="seriesName">
                    <el-input
                        maxlength="30"
                        v-model="queryParams.seriesName"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="6">
                <el-form-item label="车型:" prop="modelName">
                    <el-input
                        maxlength="30"
                        v-model="queryParams.modelName"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
            </el-col>

            <!--            <el-col :span="6">-->
            <!--                <el-form-item label="审批进度" prop="approvalStatus">-->
            <!--                    <el-select v-model="queryParams.approvalStatus" clearable>-->
            <!--&lt;!&ndash;                        <template v-for="dict in dict.type.customer_property">&ndash;&gt;-->
            <!--&lt;!&ndash;                            <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>&ndash;&gt;-->
            <!--&lt;!&ndash;                        </template>&ndash;&gt;-->
            <!--                    </el-select>-->
            <!--                </el-form-item>-->
            <!--            </el-col>-->
        </SearchContent>

        <div class="card-wrap card-padding">
            <div class="table-title-wrap justify-end">
                <el-button
                    type="primary"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['purchaseManage:purchaseList:add']"
                    >新增
                </el-button>
                <el-button
                    type="success"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['purchaseManage:purchaseList:export']"
                    >导出
                </el-button>
            </div>

            <table-page
                :loading="loading"
                :dataList="dataList"
                border
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @setSizeCurrent="getList"
            >
                <!-- 操作插槽 -->
                <template slot="tableColAc">
                    <el-table-column
                        label="操作"
                        width="210"
                        align="center"
                        class-name="small-padding fixed-width"
                    >
                        <template slot-scope="scope">
                            <e-button
                                v-if="scope.row.balancePayFlag"
                                size="mini"
                                type="text"
                                @click="handleTransfer(scope.row)"
                                v-hasPermi="[
                                    'purchaseManage:purchaseList:balance',
                                ]"
                                >余额支付通知
                            </e-button>
                            <!--                            v-if="2==scope.row.purchaseSource"-->
                            <e-button
                                v-if="
                                    2 == scope.row.purchaseSource &&
                                    1 != scope.row.saveFlag
                                "
                                size="mini"
                                type="text"
                                @click="handlePurchase(scope.row)"
                                v-hasPermi="[
                                    'purchaseManage:purchaseList:orderPurchase',
                                ]"
                                >采购
                            </e-button>
                            <!--                            saveFlag 0保存  1提交中-->
                            <e-button
                                v-else-if="
                                    1 == scope.row.purchaseSource &&
                                    1 != scope.row.saveFlag
                                "
                                size="mini"
                                type="text"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="[
                                    'purchaseManage:purchaseList:edit',
                                ]"
                                >编辑
                            </e-button>
                            <e-button
                                v-if="
                                    1 != scope.row.saveFlag &&
                                    1 == scope.row.purchaseSource
                                "
                                size="mini"
                                type="text"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="[
                                    'purchaseManage:purchaseList:delete',
                                ]"
                                >删除
                            </e-button>
                            <e-button
                                size="mini"
                                type="text"
                                @click="handleDetail(scope.row)"
                                v-hasPermi="[
                                    'purchaseManage:purchaseList:view',
                                ]"
                                >查看
                            </e-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 普通列插槽 -->
                <template slot="tableCol">
                    <el-table-column
                        show-overflow-tooltip
                        label="订单编号"
                        min-width="210"
                        align="center"
                        prop="orderNo"
                    >
                        <template slot-scope="scope">
                            <span
                                :class="
                                    scope.row.orderNo ? 'table-blue-text' : ''
                                "
                                @click="orderDetail(scope.row)"
                                >{{ scope.row.orderNo | filterNull }}</span
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="采购编号"
                        min-width="255"
                        align="center"
                        prop="purchaseNo"
                    />
                    <el-table-column
                        show-overflow-tooltip
                        label="业务来源"
                        min-width="115"
                        align="center"
                        prop="businessScopeCode"
                    >
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.quota_source_business"
                                :value="scope.row.businessScopeCode"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="业务担当"
                        min-width="130"
                        align="center"
                        prop="saleName"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.saleName | filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="客户名称"
                        min-width="130"
                        align="center"
                        prop="customerName"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.customerName | filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="状态"
                        min-width="115"
                        align="center"
                        prop="handleStatus"
                    >
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.handle_status"
                                :value="scope.row.handleStatus"
                            />
                            <!--                            {{0==scope.row.handleStatus?'待处理':-->
                            <!--                                2==scope.row.handleStatus?'已处理':'&#45;&#45;'}}-->
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="审批状态"
                        min-width="130"
                        align="center"
                        prop="expenseStatus"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.expenseStatus | filterNull }}
                        </template>
                    </el-table-column>
                    <!--                    <el-table-column label="财务进度" align="center" prop="finance">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            {{scope.row.finance|filterNull}}-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                    <el-table-column
                        show-overflow-tooltip
                        label="来源"
                        min-width="115"
                        align="center"
                        prop="purchaseSource"
                    >
                        <template slot-scope="scope">
                            <dict-tag
                                :options="dict.type.purchase_source"
                                :value="scope.row.purchaseSource"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="操作人"
                        min-width="130"
                        align="center"
                        prop="operationName"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.operationName | filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="提交时间"
                        min-width="150"
                        align="center"
                        prop="updateTime"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.commitTime | filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="创建时间"
                        min-width="150"
                        align="center"
                        prop="createTime"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.createTime | filterNull }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip
                        label="更新时间"
                        min-width="150"
                        align="center"
                        prop="updateTime"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.updateTime | filterNull }}
                        </template>
                    </el-table-column>
                    <!--                    <el-table-column label="企划计划支付日期" width="150" align="center" prop="belongCityId">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            {{scope.row.belongCityId|filterNull}}-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                </template>
            </table-page>
        </div>

        <!-- 添加或修改测试单表对话框 -->
        <el-dialog
            :title="title"
            :visible.sync="open"
            append-to-body
            width="75%"
        >
            <el-table
                border
                @selection-change="handlePayChange"
                :data="noticeList"
                style="width: 100%"
            >
                <el-table-column
                    align="center"
                    :selectable="(row) => 0 == row.payStatus"
                    type="selection"
                    width="55"
                >
                </el-table-column>
                <el-table-column
                    align="center"
                    min-width="150"
                    show-overflow-tooltip
                    prop="planPayDate"
                    label="企划计划支付日期"
                >
                    <template v-slot="{ row }">
                        <el-date-picker
                            v-model="row.planPayDate"
                            type="date"
                            placeholder="请选择企划计划支付日期"
                            value-format="yyyy-MM-dd"
                            style="width: 100%"
                        >
                        </el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="brandName"
                    min-width="180"
                    show-overflow-tooltip
                    label="品牌"
                >
                    <template v-slot="{ row }">
                        {{ row.brandName | filterNull }}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="seriesName"
                    label="车系"
                    min-width="180"
                    show-overflow-tooltip
                >
                    <template v-slot="{ row }">
                        {{ row.seriesName | filterNull }}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="modelName"
                    label="车型"
                    min-width="180"
                    show-overflow-tooltip
                >
                    <template v-slot="{ row }">
                        {{ row.modelName | filterNull }}
                    </template>
                </el-table-column>
                <!--                <el-table-column-->
                <!--                    align="center"-->
                <!--                    prop="config"-->
                <!--                    label="配置">-->
                <!--                </el-table-column>-->
                <el-table-column
                    align="center"
                    prop="supplierName"
                    label="供应商名称"
                    min-width="180"
                    show-overflow-tooltip
                >
                    <template v-slot="{ row }">
                        {{ row.supplierName | filterNull }}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    min-width="90"
                    show-overflow-tooltip
                    prop="depositPrice"
                    label="定金金额"
                >
                    <template v-slot="{ row }">
                        {{ row.depositPrice | filterNull }}
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    min-width="90"
                    show-overflow-tooltip
                    prop="balancePrice"
                    label="余额金额"
                >
                    <template v-slot="{ row }">
                        {{ row.balancePrice | filterNull }}
                    </template>
                </el-table-column>

                <el-table-column
                    align="center"
                    prop="payStatus"
                    min-width="100"
                    show-overflow-tooltip
                    label="状态"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.pay_status"
                            :value="scope.row.payStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="remark"
                    min-width="180"
                    show-overflow-tooltip
                    label="备注"
                >
                    <template v-slot="{ row }">
                        {{ row.remark | filterNull }}
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer">
                <el-button @click="cancel">{{
                    isNew ? "取消" : "关闭"
                }}</el-button>
                <el-button
                    :loading="buttonLoading"
                    type="primary"
                    @click="submitForm"
                    v-if="isNew"
                    >确 定</el-button
                >
            </div>
        </el-dialog>

        <el-dialog title="选择组织" :visible.sync="dialogVisible" width="35%">
            <div class="head-container">
                <el-tree
                    :data="deptOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    ref="tree"
                    node-key="id"
                    default-expand-all
                    highlight-current
                    @node-click="handleNodeClick"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import {
    getNoticeBalancePayList,
    noticeBalancePay,
    purchaseDelete,
    purchaseDetail,
    purchaseList,
    toOrderDetail,
} from "@/api/purchaseManage/purchaseList";
import { deptTreeSelect, listUser } from "@/api/system/user";
import LinkageSelect from "@/views/components/linkageSelect.vue";
import { listDept } from "@/api/system/dept";
import { supplierAllList } from "@/api/memberManage/vendorList";

export default {
    name: "PurchaseList",
    components: {
        LinkageSelect,
        SearchContent,
    },
    dicts: [
        "business_scope",
        "purchase_source",
        "pay_status",
        "handle_status",
        "quota_source_business",
    ],
    data() {
        return {
            noticeList: [],
            dialogVisible: false,
            deptOptions: null,
            defaultProps: {
                children: "children",
                label: "label",
            },
            deptLabel: "",
            //按钮loading
            buttonLoading: false,
            // 遮罩层
            loading: true,
            isNew: true,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                purchaseNo: null,
                customerName: null,
                businessScopeCode: null,
                handleStatus: null,
                approvalStatus: null,
                orderNo: null,
                purchaseSource: null,
            },

            total: 0,
            dataList: [],
            userList: [],
            purchaseOrderId: "",
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                followerIds: [
                    {
                        required: true,
                        message: "转移对象不能为空",
                        trigger: "blur",
                    },
                ],
            },
            selPayList: [],
            companyOriginList: [],
            supplierList: [],
        };
    },
    created() {
        this.getList();
        this.getDeptTree();
        this.getCompanyOrigin();
        this.getSupplierList();
        // this.getUserList()
    },
    activated() {
        this.getList();
        this.getDeptTree();
    },
    methods: {
        getSupplierList() {
            supplierAllList({ approvedFlag: true, availableStatus: 0 }).then(
                (res) => {
                    if (res.code == "200") {
                        const { data, total } = res;
                        this.supplierList = data;
                    }
                }
            );
        },
        getCompanyOrigin() {
            listDept({
                deptType: "2", //组织类型（1部门 2公司）
                regionId: null, //所在城市（省市区id）
            }).then((res) => {
                this.companyOriginList = res.data;
            });
        },
        orderDetail(row) {
            if (row.orderNo) {
                toOrderDetail(row.orderNo).then((res) => {
                    this.$router.push({
                        name: "OrderDetails",
                        query: {
                            type: res.data.carType,
                            beFrom: "PurchaseList",
                            orderId: res.data.orderId,
                            // preOrderId: res.data.preOrderId,
                            calcSchemeId: res.data.calcSchemeId,
                            // isMenu: this.$route.query.isMenu
                        },
                    });
                });
            }
        },
        handlePayChange(val) {
            console.log("handlePayChange", val);

            this.selPayList =
                val?.map((item) => {
                    return item;
                }) ?? [];
        },
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;

            purchaseList(this.queryParams).then((res) => {
                if (res.code == "200") {
                    const { rows, total } = res;
                    this.dataList = rows;
                    this.total = total;
                    this.loading = false;
                }
            });
        },

        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        /** 查询组织下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 节点单击事件
        handleNodeClick(data) {
            console.log("data", data);

            this.deptLabel = data.label;
            this.deptId = data.id;
            // this.form.followerIds = null;

            this.dialogVisible = false;

            this.getUserList();
        },
        getUserList() {
            listUser({
                pageNum: 1,
                pageSize: 100000,
                deptId: this.deptId,
            }).then((response) => {
                this.userList = response.rows;
                // this.total = response.total;
                // this.loading = false;
            });
        },
        deptClick() {
            this.dialogVisible = true;

            this.$refs.deptselect.blur();
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                followerIds: null,
                transferMemo: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            (this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                purchaseNo: null,
                customerName: null,
                businessScopeCode: null,
                handleStatus: null,
                approvalStatus: null,
                orderNo: null,
                purchaseSource: null,
            }),
                // this.resetForm("queryForm");
                this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "/purchase/export",
                {
                    ...this.queryParams,
                },
                `采购列表.xlsx`
            );
        },
        /** 新增操作 */
        handleAdd() {
            this._toPage({
                name: "PurchaseAdd",
                query: { pageType: "新增采购" },
            });
        },

        //采购操作
        handlePurchase(row) {
            this._toPage({
                name: "OrderPurchase",
                query: {
                    purchaseOrderId: row.purchaseOrderId,
                    pageType: "订单采购",
                },
            });
        },

        /** 转移 */
        handleTransfer(row) {
            // this.$modal.msgError("开发中")
            // purchaseDetail(row.purchaseOrderId).then(res => {
            //     this.form = res.data.purchaseInfoList[0]
            //     console.log('res', res.data)
            //     this.form.modeldata = `${this.form.brandName}/${this.form.seriesName}/${this.form.modelName}`
            //     // this.form.modeldata = "dfghdfgh"
            // })

            getNoticeBalancePayList({
                purchaseOrderId: row.purchaseOrderId,
            }).then((res) => {
                this.noticeList = res.data;
            });

            this.purchaseOrderId = row.purchaseOrderId;
            this.reset();
            this.open = true;
            this.title = "余额支付通知";
        },

        handleDetail(row) {
            // this._toPage({
            //     name: 'PurchaseDetail',
            //     query: {purchaseOrderId: row.purchaseOrderId}
            // })

            if (2 == row.purchaseSource) {
                //订单
                this._toPage({
                    name: "OrderPurchase",
                    query: {
                        purchaseOrderId: row.purchaseOrderId,
                        type: "detail",
                        pageType: "订单采购详情",
                    },
                });
            } else {
                this._toPage({
                    name: "PurchaseAdd",
                    query: {
                        purchaseOrderId: row.purchaseOrderId,
                        type: "detail",
                        pageType: "采购详情",
                    },
                });
            }
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            if (2 == row.purchaseSource) {
                //订单
                this._toPage({
                    name: "OrderPurchase",
                    query: {
                        purchaseOrderId: row.purchaseOrderId,
                        pageType: "编辑订单采购",
                    },
                });

                // this._toPage({
                //     name: 'OrderPurchase',
                //     query: {purchaseOrderId: row.purchaseOrderId, pageType: '编辑订单采购'}
                // })
            } else {
                this._toPage({
                    name: "PurchaseAdd",
                    query: {
                        purchaseOrderId: row.purchaseOrderId,
                        pageType: "编辑采购",
                    },
                });
            }
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal
                .confirm("确定删除？")
                .then(() => {
                    this.loading = true;
                    return purchaseDelete(row.purchaseOrderId);
                })
                .then(() => {
                    this.loading = false;
                    this.handleQuery();
                    this.$modal.msgSuccess("删除成功");
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        /** 提交按钮 */
        submitForm() {
            if (this.selPayList && this.selPayList.length) {
                this.buttonLoading = true;
                noticeBalancePay(this.selPayList)
                    .then((res) => {
                        this.$modal.msgSuccess("已通知");
                        this.open = false;
                        this.reset();
                        this.handleQuery();
                    })
                    .finally((f) => {
                        this.buttonLoading = false;
                    });
            } else {
                this.$modal.msgWarning("请选择数据");
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.pagination-container {
    padding: 0 20px 50px !important;
}

.form-dialog {
    ::v-deep .el-dialog__header {
        padding: 10px 20px;
        border-bottom: 1px solid #dcdfe6;

        .el-dialog__headerbtn {
            top: 15px;
        }
    }

    .box-card {
        margin-bottom: 20px;

        .card-title {
            font-size: 16px;
            position: relative;
            margin-left: 8px;
            padding: 0;
        }

        .card-title::after {
            content: "";
            width: 4px;
            height: 18px;
            background-color: aqua;
            display: block;
            position: absolute;
            left: -12px;
            top: 2px;
        }
    }
}
</style>
